<template>
  <div>
    <div style="text-align: right;">
      <el-button-group>
        <el-input placeholder="请输入内容" v-model="query" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-button-group>
      <el-button-group>
        <el-button type="primary" icon="el-icon-refresh" @click="btnRefreshHandle()">
          <span class="hidden-xs-only">刷新</span>
        </el-button>
      </el-button-group>
      <el-button-group>
        <el-button type="primary" icon="el-icon-plus" @click="btnAddHandle()">
          <span class="hidden-xs-only">添加</span>
        </el-button>
        <el-button type="primary" icon="el-icon-edit" @click="btnEditHandle()">
          <span class="hidden-xs-only">编辑</span>
        </el-button>
        <el-button type="primary" icon="el-icon-delete" @click="btnDeleteHandle()">
          <span class="hidden-xs-only">删除</span>
        </el-button>
      </el-button-group>
    </div>
    <el-table
      :highlight-current-row="true"
      :stripe="true"
      @row-dblclick="rowDblClickHandle"
      ref="client_table"
      :data="data.data"
      :fit="true"
      :max-height="529"
      :border="true"
      style="width: 100%;margin: 10px 0px; ">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="clientId" label="客户端ID" width="200" fixed></el-table-column>
      <el-table-column prop="clientSecret" label="客户端密码" width="200"></el-table-column>
      <el-table-column prop="scope" label="范围" width="200">
        <template slot-scope="scope">{{scope.row.scope ? scope.row.scope.join(',') : ''}}</template>
      </el-table-column>
      <el-table-column prop="authorizedGrantTypes" label="认证方式" width="200">
        <template slot-scope="scope">
          {{scope.row.authorizedGrantTypes ? scope.row.authorizedGrantTypes.join(',') : ''}}
        </template>
      </el-table-column>
      <el-table-column prop="resourceIds" label="资源列表" width="200">
        <template slot-scope="scope">{{scope.row.resourceIds ? scope.row.resourceIds.join(',') : ''}}</template>
      </el-table-column>
      <el-table-column prop="redirectUris" label="跳转列表" width="200">
        <template slot-scope="scope">{{scope.row.redirectUris ? scope.row.redirectUris.join(',') : ''}}</template>
      </el-table-column>
      <el-table-column prop="authorities" label="权限" width="200">
        <template slot-scope="scope">{{scope.row.authorities ? scope.row.authorities.join(',') : ''}}</template>
      </el-table-column>
      <el-table-column prop="accessTokenValiditySeconds" label="TOKEN有效期" width="200"></el-table-column>
      <el-table-column prop="refreshTokenValiditySeconds" label="REFRESH_TOKEN有效期" width="200"></el-table-column>
      <el-table-column prop="autoApprove" label="自动授权" width="200">
        <template slot-scope="scope">{{scope.row.autoApprove == true ? "否" : "是"}}</template>
      </el-table-column>
    </el-table>
    <el-pagination background
                   @current-change="loadData()"
                   @size-change="loadData()"
                   :total="data.total"
                   :current-page.sync="data.page"
                   :page-size.sync="data.size"
                   :hide-on-single-page="false"
                   :page-sizes="[10, 15, 20, 25,30, 35,40]"
                   layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    <el-dialog title="客户端编辑" :visible.sync="editorVisible" :close-on-click-modal="false">
      <ClientEditor :row="editRow" @save-success="onSaveSuccess"></ClientEditor>
    </el-dialog>
  </div>
</template>

<script>
import ClientEditor from './ClientEditor'
import moment from 'moment'

export default {
  name: "ClientList",
  components: {ClientEditor},
  data() {
    return {
      editorVisible: false,//用于控制编辑窗口的显示
      editRow: {},//用于传递给编辑窗口的参数
      query: null,//资源保存资源输入的查询内容
      data: {total: 0, data: [], size: 10, page: 1}//资源列表数据
    };
  },
  mounted() {
    //初始化时加载资源数据
    this.loadData();
  },
  methods: {
    dateFormat: function (row, column) {
      let date = row[column.property];
      return date ? moment(date).format("YYYY/MM/DD") : "";
    },
    rowDblClickHandle(row, column, event) {
      this.edit(row);
    },
    //添加资源事件处理函数
    btnAddHandle() {
      this.add()
    },
    btnRefreshHandle() {
      this.loadData();
    },
    //编辑资源事件处理函数
    btnEditHandle() {
      let me = this;
      let rows = this.$refs.client_table.selection;
      if (rows.length > 0) {
        if (rows.length == 1) {
          this.edit(rows[0])
        } else {
          this.$notify({type: "error", title: '错误', message: '选择数据过多，请选择一条数据进行编辑！', offset: 0, duration: 2000});
        }
      } else {
        this.$notify({type: "error", title: '错误', message: '未选择数据，请选择一条数据进行编辑！', offset: 0, duration: 2000});
      }
    },
    //删除资源事件处理函数
    btnDeleteHandle() {
      let me = this;
      let rows = this.$refs.client_table.selection;
      if (rows.length > 0) {
        this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
          confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
        }).then(() => {
          me.delete(rows);
        }).catch(() => {
        });

      }
    },
    //添加资源函数
    add(row) {
      this.editorVisible = true;
      this.editRow = {locked: false};
    },
    //编辑资源函数
    edit(row) {
      this.editorVisible = true;
      this.editRow = {id: row.id};
      // this.$router.push({name: "client_edit", params: {id: row.id}})
    },
    onSaveSuccess() {
      this.editorVisible = false
      this.loadData();
    },
    //删除资源函数
    delete(rows) {
      let me = this;
      let ids = [];
      rows.forEach(item => {
        ids.push(item.id);
      })
      this.axios({
        url: "management/authorization/client/deletes",
        method: "POST",
        data: ids
      }).then(resp => {
        if (resp.data.success == true) {
          me.$message({
            message: "资源数据删除成功！",
            type: 'success',
          });
          me.loadData();
        }
      })
    },
    //加载资源数据
    loadData() {
      console.log(this.$utils.date.format(new Date(),"yyyy-M-d"))
      this.axios({
        url: "management/authorization/client/query",
        method: "POST",
        data: {size: this.data.size, page: this.data.page - 1, sorts: [{property: "id", direction: "asc"}]}
      }).then(resp => {
        this.data.data = resp.data.data
        this.data.size = resp.data.size
        this.data.page = resp.data.page + 1
        this.data.total = resp.data.total
      }).catch(resp => {
        console.log(resp)
      })
    }
  }
}
</script>

<style scoped>
</style>
